<template>
    <div class="groupAwardStandard">
        <div>
            创建时间：
            <el-date-picker
                    v-model="searchTime"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
            </el-date-picker>
            <el-button class="ml30" type="primary" @click="searchDataByTime" id="monitorEnter">查询</el-button>
            <el-button type="primary" @click="openDialog('new')">新建</el-button>
        </div>
        <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%;margin-top: 20px;">
            <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    width="50">
            </el-table-column>
            <el-table-column
                    property="version"
                    align="center"
                    label="版本号">
            </el-table-column>
            <el-table-column
                    property="ruleContentList"
                    align="center"
                    label="规则标准">
                <template slot-scope="scope">
                    <template v-for="item in scope.row.ruleContentList">
                        {{ item | handleInfo}}
                        <br/>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                    property="createTime"
                    align="center"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    property="creatorName"
                    align="center"
                    label="创建人">
            </el-table-column>
            <el-table-column
                    property="statusString"
                    align="center"
                    label="状态">
            </el-table-column>
            <el-table-column
                    property="address"
                    align="center"
                    width="200"
                    label="操作">
                <template slot-scope="scope">
                    <a href="javascript:;;" @click="openDialog('view', scope.row)">查看</a>
                    <a href="javascript:;;" class="ml20" @click="openDialog('edit', scope.row)">编辑</a>
                    <a href="javascript:;;" :class="scope.row.isOnLight ? 'ml15' : 'disabled ml15'" @click="toggleStatus(1, scope.row)">上架</a>
                    <a href="javascript:;;" :class="scope.row.isOffLight ? 'ml15' : 'disabled ml15'" @click="toggleStatus(0, scope.row)">下架</a>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize">
            </el-pagination>
        </div>

        <el-dialog
                title="设置团奖标准（套）"
                :visible.sync="scaleDialogVisible"
                width="500px">
            <div>
                <ul class="dialog-list">
                    <li>
                        <span>选择合作标签</span>
                        <span>比例符号</span>
                        <span>比例数值</span>
                        <span>{{dialogType === 'view' ? '   ' : '操作'}}</span>
                    </li>
                    <li v-for="(item,index) in ruleContentList" :key="index">
                        <el-form :inline="true" :model="item" class="demo-form-inline">
                            <el-form-item label="">
                                <el-select :disabled="dialogType === 'view'" size="mini" style="width: 150px" v-model="item.labelType" placeholder="请选择合作标签">
                                    <el-option key="1" label="普通" :value="1"></el-option>
                                    <el-option key="2" label="包销" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="">
                                <el-select :disabled="dialogType === 'view'" size="mini" style="width: 100px" v-model="item.comparisonSymbol" placeholder="请选择" @change="comparisonOperatorChange(index)">
                                    <el-option
                                            v-for="(item,index) in proportionalSymbol"
                                            :key="index"
                                            :label="item.label"
                                            :value="+item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input size="mini" :disabled="item.proportionDisabled || dialogType === 'view'" style="width: 100px" v-model="item.proportion" @input="rewriteNum(item.proportion, index)"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="" v-if="dialogType !== 'view'">
                                <el-button type="text" @click="del(index)">删除</el-button>
                            </el-form-item>
                        </el-form>
                    </li>
                    <li class="tac" v-if="ruleContentList.length < 2 && dialogType !== 'view'">
                        <el-button type="primary" size="mini" @click="add">添加</el-button>
                    </li>
                </ul>
                <div class="tac mt50">
                   <span slot="footer">
                        <el-button v-if="dialogType !== 'view'" type="primary" @click="save">保存</el-button>
                        <el-button @click="scaleDialogVisible = false">关闭</el-button>
                    </span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/apiPath'

    export default {
        name: "groupAwardStandard",
        title: "团奖标准",
        data() {
            return {
                searchTime: "",
                ruleContentList: [
                    {
                        labelType: 1,
                        comparisonSymbol: "0",
                        proportion: 20
                    }
                ],
                proportionalSymbol: [
                    {
                        label: "<=",
                        value: "0"
                    },
                    {
                        label: "<",
                        value: "1"
                    },
                    {
                        label: "=",
                        value: "2"
                    }
                ],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                scaleDialogVisible: false,
                dialogType: 'view',
                tableData: [],
                tableConfig: {
                    startTime: "",
                    endTime: "",
                    pageNum: 1,
                    pageSize: 10,
                    totalSize: 10
                }
            }
        },
        created() {
            this.getSettleListByPage()
        },
        activated() {
            this.searchDataByTime()
        },
        mounted() {

        },
        methods: {
            searchDataByTime() {
                if (this.searchTime === null) {
                    this.searchTime = ["", ""]
                }
                if (this.searchTime.length) {
                    this.tableConfig.startTime = +new Date(this.searchTime[0])
                    this.tableConfig.endTime = +new Date(this.searchTime[1])
                }
                this.tableConfig.pageNum = 1;
                this.getSettleListByPage();
            },
            openDialog(type, data) {
                this.scaleDialogVisible = true;
                this.dialogType = type;
                if (type === 'new') {
                    this.ruleContentList = [
                        {
                            labelType: 1,
                            comparisonSymbol: 1,
                            proportion: ""
                        }
                    ]
                } else {
                    this.ruleContentList = JSON.parse(JSON.stringify(data.ruleContentList))
                }
            },
            toggleStatus(onoffStatus, data) {
                let status = ['isOffLight', 'isOnLight'];
                if (data[status[onoffStatus]] === 1) {
                    this.axios.post(api.groupAwardStandardSwitchOnOff, {
                        id: data.id,
                        onoffStatus
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$message.success('操作成功');
                            this.getSettleListByPage()
                        }
                    })
                }
            },
            del(index) {
                if (this.ruleContentList.length <= 1) {
                    this.$message({
                        message: '请至少保留一条',
                        type: 'warning'
                    });
                    return false;
                } else {
                    this.ruleContentList.splice(index, 1)
                }
            },
            add() {
                this.ruleContentList.push({})
            },
            save() {
                let ruleContentListMap = {};
                let ruleContentList = [];
                for (let i = 0; i < this.ruleContentList.length; i++) {
                    let item = this.ruleContentList[i];
                    if (!item.labelType) {
                        this.$message.warning('请选择合作标签');
                        return false;
                    }
                    if (!item.comparisonSymbol && item.comparisonSymbol !== 0) {
                        this.$message.warning('请选择比例符号');
                        return false;
                    }

                    if (!item.proportion && item.proportion !== 0 && item.comparisonSymbol !== 5) {
                        this.$message.warning('请输入比例数值');
                        return false;
                    }
                    if (ruleContentListMap[item.labelType]) {
                        this.$message.warning('合作标签选择重复');
                        return false;
                    }
                    ruleContentListMap[item.labelType] = item;
                    ruleContentList.push({
                        proportion: item.comparisonSymbol === 5 ? '' : item.proportion,
                        comparisonSymbol: item.comparisonSymbol,
                        labelType: item.labelType
                    })
                }
                this.axios.post(api.groupAwardStandardAdd, {
                    ruleContentList: ruleContentList
                }).then((res) => {
                    if (res.data.code === 200) {
                        this.$message.success('保存成功');
                        this.scaleDialogVisible = false;
                        this.getSettleListByPage()
                    }
                })
            },
            comparisonOperatorChange(index) {
                let current = this.ruleContentList[index];
                this.ruleContentList[index].proportionDisabled = current.comparisonSymbol === '5'
            },
            rewriteNum(value, index) {
                value = value.replace(/[^\d.]/g, '');
                value = value.replace(/\.{2,}/g, ".");
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                if (value.indexOf('.') < 0 && value != '') {
                    value = parseInt(value);
                }
                if (+value > 100) {
                    let valueString = value + ""
                    value = valueString.slice(0, valueString.length - 1)
                }
                this.ruleContentList[index].proportion = value
            },
            getSettleListByPage() {
                this.axios.post(api.groupAwardStandardGetList, {
                    beginTime: this.tableConfig.startTime,
                    endTime: this.tableConfig.endTime,
                    pageNum: this.tableConfig.pageNum,
                    pageSize: this.tableConfig.pageSize
                }).then((res) => {
                    console.log(res);
                    this.tableData = res.data.data.list;
                    this.tableConfig.totalSize = res.data.data.total;
                })
            },
            viewStageExtract(id) {
                this.scaleDialogVisible = true;
                this.axios.post(api.viewStageExtract, {
                    settleId: id
                }).then((res) => {
                    this.settleRangeList = res.data.data.settleRangeList
                })
            },
            handleSizeChange(size) {
                this.tableConfig.pageSize = size
                this.getSettleListByPage()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getSettleListByPage()
            },
        },
        components: {},
        filters: {
            handleInfo(item) {
                let labelType = ["普通", "包销"];
                let comparisonSymbol = ["<=", "<", "=", "", ""];
                return labelType[item.labelType - 1] + comparisonSymbol[item.comparisonSymbol] + item.proportion + '%'
            }
        }
    }
</script>

<style scoped lang="stylus">

    .groupAwardStandard {
        .dialog-list {
            padding: 0;
            li:first-child {
                display: flex;
                padding: 0 20px;
                justify-content: space-between;
            }
        }
        .disabled {
            color: #ccc;
            text-decoration: none;
        }
    }

</style>
